<!-- 物业投诉 -->
<template>
  <div class="shareLife">
    <!-- 标题栏 -->

    <!-- 内容 -->
    <div class="shareLife_div_title">分享我的生活,将快乐传递!</div>
    <ul class="shareLife_div">
      <li class="shareLife_div_li">
        <div class="shareLife_div_li_div">标题:</div>
        <el-input type="textarea" autosize placeholder="请输入标题" v-model="shareLife.title"></el-input>
      </li>
      <li class="shareLife_div_li">
        <div class="shareLife_div_li_div">小标签:</div>
        <el-input type="textarea" autosize placeholder="请输入小标签" v-model="shareLife.tag"></el-input>
      </li>
      <li>
        <div>
          内容：
          <span></span>
        </div>
        <el-input type="textarea" placeholder="请输入内容" v-model="shareLife.content"></el-input>
      </li>
      <li>
        <div>上传照片：</div>
        <van-uploader v-model="fileList" :max-count="4" multiple :before-read="beforeRead">
          <template #preview-cover="{ file }">
            <div class="preview-cover van-ellipsis">{{ file.name }}</div>
          </template>
        </van-uploader>
      </li>
      <div class="shareLife_div_btn">
        <el-button type="primary" @click="upload">提交</el-button>
      </div>
    </ul>
  </div>
</template>

<script>
import { Notify } from 'vant'
export default {
  props: {
    editId: {
      type: Number,
      default: 1,
    },
  },
  watch: {
    editId: function () {
      this.init()
    },
  },
  created() {
    this.init()
  },
  data() {
    return {
      shareLife: {
        title: '',
        content: '',
        tag: '',
        id: this.editId.toString(),
      },
      fileList: [],
      flag: false,
    }
  },

  methods: {
    async init() {
      const res = await this.$axios.get('/dynamic/info/' + this.editId)
      if (res.data.code == 200) {
        this.shareLife.title = res.data.data.title
        this.shareLife.content = res.data.data.content
        this.shareLife.content = res.data.data.content
        this.shareLife.tag = res.data.data.tag
      }
    },
    // 上传预处理
    beforeRead(file) {
      const FileExt = file.name.replace(/.+\./, '')
      const isJPG = !(['jpg', 'png'].indexOf(FileExt.toLowerCase()) === -1)
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        Notify({
          type: 'danger',
          message: '上传头像图片只能是 JPG / png 格式!',
        })
      } else if (!isLt2M) {
        Notify({ type: 'danger', message: '上传头像图片大小不能超过 5M!' })
      } else {
        this.flag = true
      }
      return isJPG && isLt2M
    },
    // 文件上传
    upload() {
      let formData = new FormData()
      for (let index = 0; index < this.fileList.length; index++) {
        formData.append('imgFiles', this.fileList[index].file)
      }
      formData.append(
        'dynamic',
        new Blob([JSON.stringify(this.shareLife)], {
          type: 'application/json',
        })
      )

      this.$axios
        .post('/dynamic/update', formData, {
          headers: { 'Content-Type': 'multipart/form-data' },
        })
        .then((res) => {
          if (res.data.code == 200) {
            Notify({ type: 'success', message: '提交成功！' })
            this.$emit('submitSucess')
          }
        })
    },
  },
}
</script>

<style>
.shareLife_div {
  padding: 3%;
  margin-top: 15px;
}
.shareLife_div_title {
  font-size: 18px;
  color: #bbbbbb;
  width: 100%;
  background-color: #f1f1f1;
  padding: 5px;
  text-align: center;
}
.shareLife_div_title > span {
  color: red;
}

/* 投诉内容开始 */
.shareLife_div > li {
  padding-top: 3%;
  padding-left: 3%;
  padding-right: 3%;
}
.shareLife_div > li > div {
  font-size: 16px;
  margin-bottom: 3%;
}
.shareLife_div > li > div > span {
  color: red;
}

/* 提交按钮 */
.shareLife_div_btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
